<template>
  <div>
    <TableList :list="list" :column="column">
    <!-- <TableList :list="list" :column="column" :rowClick="rowClick"> -->
      <div slot="column2" class="noBlueBg">
        <el-table-column
          v-if="identity==='2'"
          prop="longitude"
          align="center"
          width="300"
          label="操作">
          <template slot-scope="scope">
            <el-button type="primary" plain size="mini" @click="rowClick(scope.row,2)"
                       v-if="scope.row.state!=='0' &&scope.row.stateTwo===1">稽核
            </el-button>
            <el-button type="success" plain size="mini" @click="rowClick(scope.row,3)"
                       v-if="scope.row.state!=='0' &&  scope.row.stateTwo===2">发布
            </el-button>
            <el-button type="danger" plain size="mini" @click="rowClick(scope.row,0)"
                       v-if="scope.row.state!=='0'  && scope.row.stateTwo===2">忽略
            </el-button>
            <el-button type="warning" plain size="mini" @click.stop="examine(scope.row)" v-if="scope.row.stateTwo===4 && scope.row.orderEndTime">
              审核
            </el-button>
            <el-button
              size="mini"
              @click="goTo(scope.row.longitude,scope.row.latitude)">到这去
            </el-button>
          </template>

        </el-table-column>

        <el-table-column
          prop="groupName"
          align="center"
          width="260"
          label="所属中心">
        </el-table-column>

        <el-table-column
          prop="road"
          align="left"
          width="200"
          label="路段">
        </el-table-column>

        <el-table-column
          prop="stakeNo"
          align="left"
          width="200"
          label="桩号">
        </el-table-column>

        <el-table-column
          prop="name"
          align="left"
          label="监测点名称">
        </el-table-column>
        <el-table-column
          prop="groupValue"
          align="center"
          width="200"
          label="分组">
          <template slot-scope="scope">
            {{ scope.row.groupValue }}/{{getTypeName(scope.row.groupType)}}
          </template>
        </el-table-column>

        <!-- <el-table-column
          prop="manufacturer"
          align="center"
          width="200"
          label="类型">
          <template slot-scope="scope">
            {{
            scope.row.stateTwo<=1?dict['camera'][scope.row.state]:dict['camera'][scope.row.jhState]
            }}
          </template>
        </el-table-column> -->

<!--        <el-table-column-->
<!--          prop="manufacturer"-->
<!--          align="center"-->
<!--          width="120"-->
<!--          label="状态">-->
<!--          <template slot-scope="scope">-->
<!--            {{-->
<!--           dict['status'][scope.row.stateTwo]-->
<!--            }}-->
<!--          </template>-->
<!--        </el-table-column>-->


        <el-table-column
          prop="manufacturer"
          align="center"
          width="200"
          label="品牌">
          <template slot-scope="scope">
            {{scope.row.bscCameraAddition && scope.row.bscCameraAddition['manufacturer']}}
          </template>
        </el-table-column>
        <el-table-column
          prop="longitude"
          align="center"
          width="200"
          label="经度">
        </el-table-column>
        <el-table-column
          prop="latitude"
          align="center"
          width="200"
          label="纬度">
        </el-table-column>
<!--        <el-table-column-->
<!--          prop="longitude"-->
<!--          align="center"-->
<!--          width="120"-->
<!--          label="工单详情">-->
<!--          <template slot-scope="scope">-->
<!--            <el-button class="ml10"-->
<!--                       v-if="(scope.row.stateTwo<=1?dict['camera'][scope.row.state]:dict['camera'][scope.row.jhState])!=='正常'"-->
<!--                       size="mini"-->
<!--                       @click.stop="viewInfo(scope.row)">查看-->
<!--            </el-button>-->
<!--          </template>-->
<!--        </el-table-column>-->


      </div>
      <div slot="option" class="noBlueBg">
        <el-form :inline="true" :model="options" class="demo-form-inline" ref="optionForm">
          <el-form-item label="所属中心" prop="roadNo">
            <el-select v-model="options.roadNo" placeholder="请选择" clearable size="mini" @keyup.enter.native="getData">
              <el-option
                v-for="(item,no) in centers"
                :key="no"
                :label="item"
                :value="no">
              </el-option>
            </el-select>

          </el-form-item>
          <el-form-item label="路段" prop="road">
            <el-input size="mini" v-model="options.road" clearable placeholder="请输入路段"
                      @keyup.enter.native="loadVideoList(1)"></el-input>
          </el-form-item>
          <el-form-item label="桩号" prop="stakeNo">
            <el-input size="mini" v-model="options.stakeNo" clearable placeholder="请输入桩号"
                      @keyup.enter.native="loadVideoList(1)"></el-input>
          </el-form-item>
          <el-form-item label="监测点名称" prop="name">
            <el-input size="mini" v-model="options.name" clearable placeholder="请输入监测点名称"
                      @keyup.enter.native="loadVideoList(1)"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="states">
            <el-select size="mini" v-model="options.states" clearable placeholder="请选择">
              <el-option v-for="(label,code) in states" :label="label" :value="code"></el-option>
            </el-select>
          </el-form-item>
<!--          <el-form-item label="状态" prop="evtState">-->
<!--            <el-select size="mini" v-model="options.evtState" clearable placeholder="请选择">-->
<!--              <el-option v-for="(label,code) in dict['status']" :label="label" :value="code"></el-option>-->
<!--            </el-select>-->
<!--          </el-form-item>-->
          <el-form-item label="分组" prop="groupType">
            <el-select v-model="options.groupType" placeholder="请选择分组类型" size="mini" clearable>
              <el-option
                v-for="(value,key) in groups"
                :key="key"
                :label="value"
                :value="key*1">
              </el-option>
            </el-select>
          </el-form-item>


          <!--          <el-form-item label="" prop="groupValue">-->
          <!--            <el-input v-model="options.groupValue" placeholder="请输入分组名称" size="mini" class="mh5" clearable></el-input>-->
          <!--          </el-form-item>-->

          <el-form-item>
            <el-button type="primary" size="mini" @click="loadVideoList(1)">查询</el-button>
            <el-button size="mini" @click="resetOption('optionForm')">重置</el-button>
            <!-- <el-button size="mini" type="warning" @click="exportTab">导出表格</el-button> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="page noBlueBg" slot="bottom">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="changePage"
          :current-page="page"
          :page-size="limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totals">
        </el-pagination>
      </div>
    </TableList>
    <Dialog :cfg="dialogCfg" ref="dialog">
      <Map ref="map"></Map>
    </Dialog>

    <Dialog :cfg="dialogCfg" ref="cameraDialog">
      <el-form label-width="90px">
        <el-form-item label="类型：" class="input-width">
          <el-select v-model="cameraJh.type" placeholder="请选择" size="mini">
            <el-option
              v-for="(label,value) in cameraTypes"
              :key="value"
              :label="label.indexOf('-')>-1?label.split('-')[1]:label"
              :value="value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="备注：" class="input-width">
          <el-input v-model="cameraJh.note" placeholder="请输入备注内容" size="mini"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>
    <Dialog :cfg="dialogCfg" ref="cameraFB">
      <el-form ref="cameraFBForm" label-width="120px" label-position="top" class="eventInfoBox" :model="fbFormData"
               :rules="fbRules">
        <el-form-item label="事件信息：">
          <div class="eventInfo">
            <label>桩号：</label>{{curRow['road']+' '+curRow['stakeNo']+' '+curRow['name']}}
          </div>
          <div class="eventInfo">
            <label>类型：</label>
            <output>{{curRow.state<=1?dict['camera'][curRow.stateTwo]:dict['camera'][curRow.jhState]}}</output>
            <label>状态：</label>
            <output>已稽核</output>
            <label>时间：</label>
            <output>{{curRow['detectedTime']}}</output>
          </div>
        </el-form-item>
        <el-form-item label="事件处理：" class="eventInfoBox2" prop="handle">
          <el-select v-model="fbFormData.handle" multiple placeholder="请选择单位" size="mini" style="width: 100%">
            <el-option
              v-for="item in orgData.center"
              :key="item.id"
              :label="item.name"
              :value="item.id.toString()">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="处理时限：" prop="expectTimeTwoNum">
          <el-select
            size="mini"
            v-model="fbFormData.expectTimeTwoNum"

            filterable
            default-first-option
            placeholder="请选择处理时限">
            <el-option
              v-for="item in timeSpaces"
              :key="item"
              :label="item+'分钟'"
              :value="item">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注：" prop="remark2">
          <el-input v-model="fbFormData.remark2"
                    placeholder="请输入备注内容" size="mini"></el-input>
        </el-form-item>
      </el-form>
    </Dialog>

    <WinPanel v-show="panelShow" :closePanel="closePanel" :data="panelData"/>
    <!--    工单详情-->
    <Dialog :cfg="infoDialogCfg" ref="infoDialog">
      <OrderInfo :data2="orderInfo" :pre="orderInfoPre"></OrderInfo>
    </Dialog>
  </div>
</template>

<script>

  import TableList from 'comp/common/TableList2';
  import WinPanel from 'comp/common/WinPanel';
  import Dialog from 'comp/common/Dialog';
  import Map from 'comp/common/Map';
  import OrderInfo from 'comp/common/OrderInfo';

  export default {
    name: "Tables",
    components: {
      TableList,
      Dialog,
      Map,
      WinPanel,
      OrderInfo
    },
    data() {
      return {
        orgData: {},
        groups: this.$kkui.cache.get('dict')['cameraGroup'],
        states: this.$kkui.cache.get('dict')['camera'],
        centers: this.$kkui.cache.get('dict')['center'],
        departments2: [],
        fbRules: {
          handle: [
            {required: true, type: 'array', message: '事件处理单位不能为空！', change: 'change'}
          ],
          expectTimeTwoNum: [
            {required: true, message: '处理时限不能为空！', change: 'change'}
          ]
        },
        cameraJh: {
          type: '',
          note: ''
        },
        fbFormData: {
          handle: [],
          expectTimeTwoNum: '5',
          remark2: ''
        },
        identity: this.$kkui.cache.get('user')['identityId'],
        cameraTypes: this.$kkui.cache.get('dict')['camera'],
        options: {
          roadNo: '',
          name: '',
          stakeNo: '',
          road: '',
          states: '',
          evtState: '',
          groupValue: '',
          groupType: ''
        },
        list: [],
        column: [
          {
            prop: 'road',
            label: '路段'
          },
          {
            prop: 'location',
            label: '安装桩号'
          },
          {
            prop: 'status',
            label: '状态'
          },
          {
            prop: 'belong',
            label: '管理单位'
          },
          {
            prop: 'contac',
            label: '联系人'
          },

          {
            prop: 'tel',
            label: '联系电话'
          }
        ],


        limit: 20,
        page: 1,
        pages: 1,
        totals: 0,

        dialogCfg: {
          width: 600,
          height: 400,
          title: '',
          closeShow: !!1,
          footerShow: !!1,
          submit: () => {
          }
        },
        units: [],
        curUnit: '',
        departments: [],
        curDepartment: '',
        receive: '',
        receives: [],
        sendBaseFlag: true,
        dict: this.$kkui.cache.get('dict'),
        curRow: {},
        timeSpaces: WebCfg['timeSpaces'],
        kuaisulu: '',
        panelShow: false,
        panelData: {},

        orderInfo: {},
        orderInfoPre: {},
        infoDialogCfg: {
          width: 700,
          height: 350,
          title: '工单详情',
          footerShow: !!0,
          closeShow: !!1
        },
      }
    },
    mounted() {
      this.getDepartments2();
      this.loadVideoList();
      this.getOrgData();
    },
    methods: {
      viewInfo(cell) {
        this.$server('camera.orderInfo', {eventInfoId: parseInt(cell['stateTwo'])>=3?cell['jhEventId']: cell.id}).then(data => {
          this.orderInfo = data;
          this.orderInfoPre = {...cell, infoType: 'camera'};
          this.$refs.infoDialog.show = 1;
        })
      },
      closePanel() {
        this.panelShow = false;
      },
      examine(row) {
        const fn = (v) => {
          this.$server('camera.examine', {
            id: row.id,
            isPassage: v
          }).then(data => {
            this.$kkui.msg({
              icon: 1,
              cont: '操作完成！'
            });
            this.loadVideoList();
          })
        };
        this.$kkui.alert({
          icon: '',
          title: '审核',
          cont: '请选择事件处理的结果？',
          btn0Txt: '通过',
          btn1Txt: '不通过',
          callback: () => {
            fn(1);
          },
          cancelCallback: () => {
            fn(0);
          }

        })
      },
      rowClick(row) {
        const item = JSON.parse(JSON.stringify(row));
        const camera = item['bscCameraAddition'];
        if (camera) {
          let color = '';
          if (item.state === '0') {
            color = '#1296DB';
          } else if (item.state === '-1') {
            color = '#C90AF2';
          } else {
            const _s = item['stateTwo'] <= 1 ? item.state : item.jhState;
            color = WebCfg['eventColor'][_s];
          }
          const id = item.id,
            gis = [item['longitude'], item['latitude']];


          let _cfg = {
            preData: item,
            id,
            type: 'camera',
            imagePath: item['imgPath'],
            livePath: WebCfg.lineMode === 1 ? item['videoAddress'] : 'ws:' + WebCfg.api['wsUrl'] + ':' + WebCfg.api.wsPort + '/' + item['videoAddress'],
            // livePath:  'ws:'+WebCfg.api['wsUrl]+':'+(WebCfg.api.wsPort+parseInt(idx/4))+'/'+item['videoAddress'],
            // livePath:  'ws://172.16.16.50:11507/'+item['videoAddress'],
            state: item.state,
            stateTwo: item.stateTwo,
            items: [
              {
                key: 'type',
                label: '类型',
                value: item['stateTwo'] <= 1 ? this.dict['camera'][item.state] : this.dict['camera'][item.jhState],
                color
              },
              {
                key: 'state',
                label: '状态',
                value: item['state'] === '0' ? '正常' : this.dict['status'][item['stateTwo']],
                color
              },
              {
                key: 'road',
                label: '路段',
                value: item['road'],
                color
              },
              {
                key: 'pos',
                label: '桩号',
                value: item['road'] + ' ' + item['stakeNo'] + ' ' + item['name'],
                color
              }
            ],
            callback: () => {
              this.loadVideoList();
            }
          };
          this.panelData = _cfg;
        } else {
          return false;
        }
        this.panelShow = !!1;
      },


      getOrgData() {
        this.$server('org.list').then(data => {
          let orgData = {center: [], base: []};
          data.forEach(item => {
            if (item.name === '各分中心' || item.name === '联动单位') {
              orgData.center = orgData.center.concat(item.children);

              if (item.name === '各分中心') {
                item.children.forEach(item => {
                  if (item.name === '快速路') {
                    this.kuaisulu = [item.id].toString();
                  }
                })
              }
            } else {
              orgData.base = orgData.base.concat(item.children)
            }
          });
          this.orgData = orgData;
        })
      },
      getTypeName(code) {
        return this.groups[code]
      },
      getDepartments2() {
        this.$server('org.list').then(data => {
          this.departments2 = [];
          data.forEach(item => {
            if (item.name !== '各分中心') {
              item.children.forEach(itm => {
                this.departments2.push(itm);
              })
            }
          })
        })
      },
      loadVideoList(firstPageFlag) {
        if (firstPageFlag) this.page = 1;
        this.$server('camera.list', {
          limit: this.limit,
          page: this.page,
          ...this.options
        }).then(data => {
          this.list = data['records'];
          this.totals = data['total'];
          this.$kkui.loading_deepBlue.hide();
        })
      },
      exportTab() {
        const index = this.$kkui.loading.show();
        this.$server('camera.exportTable', {
          ...this.options
        }).then(data => {
          let url = window.URL.createObjectURL(new Blob([data]));
          let link = document.createElement('a');
          link.style.display = 'none';
          link.href = url;
          link.setAttribute('download', '摄像机工况表.xls');
          document.body.appendChild(link);
          link.click()
        })
      },

      // 重置option
      resetOption(formName) {
        this.$refs[formName].resetFields();
      },

      //切换分页
      changePage(page) {
        this.page = page;
        this.loadVideoList();
      },
      handleSizeChange(val) {
        this.limit = val;
        this.loadVideoList();
      },
      send() {
        this.$kkui.alert({
          icon: 0,
          cont: '确定派单维修吗？',
          callback: () => {
            this.$kkui.msg({
              icon: 1,
              cont: '派单成功！'
            })
          }
        })
      },
      goTo(lng, lat) {
        this.dialogCfg = {
          title: '查看桩号',
          closeShow: true,
          width: 615,
          height: 430,
          bg: true
        };
        this.$refs.dialog.show = true;
        setTimeout(() => {
          this.$refs.map.addSimpleMarker(lng, lat);
        }, 1000)


      },


      changeUnit() {
        this.$server('org.department', {
          company: this.curUnit,
        }).then(data => {
          this.curDepartment = '';
          this.receive = '';
          this.departments = data;
        })
      },

      changeDepartment() {
        this.$server('org.user', {
          company: this.curUnit,
          department: this.curDepartment
        }).then(data => {
          this.receive = '';
          this.receives = data;
        })
      },

      sendRepairOrder(row, num) {
        if (num === 2) {
          this.cameraJh.type = row.state;
          this.dialogCfg.width = 320;
          this.dialogCfg.height = 240;
          this.dialogCfg.title = '稽核';
          this.$refs.cameraDialog.show = 1;
          this.dialogCfg.submit = () => {
            this.$kkui.alert({
              icon: 0,
              cont: '确定稽核此事件为"' + this.dict['camera'][this.cameraJh.type] + '"吗？',
              callback: () => {
                this.$server('camera.jihe', {
                  jhState: this.cameraJh.type,
                  id: row.id
                }).then(data => {
                  this.$kkui.msg({
                    icon: 1,
                    cont: '事件稽核成功！'
                  });
                  this.loadVideoList();
                  this.$refs.cameraDialog.show = false;

                })
              }
            });
          }
        } else if (num === 3) {
          this.curRow = row;
          this.fbFormData = {
            handle: [this.kuaisulu],
            expectTimeTwoNum: '5',
            remark2: ''
          };
          this.$refs.cameraFB.show = true;
          this.dialogCfg.width = 600;
          this.dialogCfg.height = 470;
          this.dialogCfg.title = '发布';
          this.dialogCfg.submit = () => {
            this.$refs['cameraFBForm'].validate((valid) => {
              if (valid) {
                this.$kkui.alert({
                  icon: 0,
                  cont: '确定发布此事件吗？',
                  callback: () => {
                    this.fbFormData.handle = this.fbFormData.handle.map(item => {
                      return parseInt(item);
                    });
                    this.$server('camera.fabu', {
                      id: row.id,
                      state: 3,
                      dispatcher: this.$kkui.cache.get('user')['departmentId'],
                      ...this.fbFormData
                    }).then(data => {
                      this.$kkui.msg({
                        icon: 1,
                        cont: '事件发布成功！'
                      });
                      this.$refs.cameraFB.show = false;
                      this.loadVideoList();
                    })
                  }
                })
              }
            });
          };

        } else if (num === 0) {
          this.$kkui.alert({
            icon: 0,
            cont: '确定忽略发布此事件吗？',
            callback: () => {
              this.$server('camera.hl', {
                id: row.id
              }).then(data => {
                this.$kkui.msg({
                  icon: 1,
                  cont: '事件忽略成功！'
                });
                this.loadVideoList();
              })
            }
          })
        }
      },


    },


  }
</script>

<style scoped lang="scss">
  .eventInfoBox {
    padding: 0 5px;
  }

  .eventInfo {
    /*display: flex;*/
    /*justify-content: space-between;*/
    /*line-height: 24px;*/
    line-height: 24px;

    label {
      color: #828282;
      margin-left: 28px;
    }

    output {
      color: #404040
    }

    span {
      width: 30%;
      display: inline-block;
      overflow: hidden;

    }

    span:last-child {
      width: 40%;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

  }

  /deep/ .el-form .el-form-item:last-child {
    margin-bottom: 20px;
  }

  /deep/ .el-form-item__label {
    font-weight: 600;
  }

  /deep/ .el-form-item {
    margin-bottom: 20px;
  }

  /deep/ .eventInfoBox2 .el-form-item__content {
    display: flex;
  }

  /deep/ .eventInfoBox .el-form-item__label {
    width: 100%;
    line-height: 24px;
    padding: 0;
  }

</style>
